<script>
export default {
  name: 'carModelsForm',
  data() {
    return {
      formData: {
        // 准载重量
        allowableLoad: '',
        // 准载体积
        allowableVolume: '',
        // 高
        measureHigh: '',
        // 长
        measureLong: '',
        // 宽
        measureWidth: '',
        // 车辆类型名称
        name: ''
      },
      formRules: {
        allowableLoad: [
          { required: true, message: '请输入准载重量', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '请输入准载体积', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '请输入车型高', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '请输入车型高', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '请输入车型长', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入车辆类型名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /*
    * 或者车辆详情的回调函数
    *  */
    async fetchCarModels(id) {
      const carModels = await this.$store.dispatch('carModelsStore/fetchCarModelsAction', id)
      this.formData = carModels
    },
    /*
    * 清空表单数据的回调函数
    *  */
    resetFormData() {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="车辆类型" prop="name">
      <el-input placeholder="请输入车辆类型" v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="准载重量" prop="allowableLoad">
      <el-input placeholder="请输入应载重量" v-model="formData.allowableLoad">
        <template slot="append">吨</template>
      </el-input>
    </el-form-item>
    <el-form-item label="应载体积" prop="allowableVolume">
      <el-input placeholder="请输入应载体积" v-model="formData.allowableVolume">
        <template slot="append">立方</template>
      </el-input>
    </el-form-item>
    <el-form-item label="车型长" prop="measureLong">
      <el-input placeholder="请输入车型长" v-model="formData.measureLong">
        <template slot="append">米</template>
      </el-input>
    </el-form-item>
    <el-form-item label="车型宽" prop="measureWidth">
      <el-input placeholder="请输入车型宽" v-model="formData.measureWidth">
        <template slot="append">米</template>
      </el-input>
    </el-form-item>
    <el-form-item label="车型高" prop="measureHigh">
      <el-input placeholder="请输入车型高" v-model="formData.measureHigh">
        <template slot="append">米</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

.el-form {
  width: 80% !important;
}

</style>
